<template>
	<ls-skeleton :loading="loading">
	<view>
		<!-- <u-skeleton :rowsWidth="['50%', '60%', '80%', '80%', '80%', '80%', '80%', '80%']" rows="10" :loading="loading"
			:title="false" rowsHeight="36"> -->
			<view class="container" :style="{height: winHeight+ 'px'}">
				<view class="a">
					<view class="uni-inline-item">
						<picker @change="bindPickerChange" :value="index" :range="cityData" range-key="areaName">
							<text>{{cityData[index].areaName}}</text>
						</picker>
						<view class="uni-flex-item flex-row row-center">
							<u-search searchIconSize="44" height="70" bgColor="#fff" placeholder="输入关键字进行搜索"
								v-model="keyword" @custom="getSearch"></u-search>
							<view class="flex-row row-center" @touchstart="streamRecord" @touchend="endStreamRecord">
								<u-icon name="mic" size="42" color="#2979ff"></u-icon>
							</view>
							<!-- <view class="search">
							<icon type="search" size="16" color="#999" />
							<view class="uni-flex-item"><input type="text" v-model="searchVal" class="uni-input" placeholder="输入关键字进行搜索" />
							</view>
						</view>
						</view>
						<!-- <view class="searchBtn">
						<u-button text="搜索" @click="getSerachList"></u-button>
					</view> -->
					</view>
				</view>

				<view class="con-box">
					<view class='aside'>
						<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;"
							scroll-with-animation='true' :scroll-into-view="intoindex" :scroll-top="scrollTop">
							<view v-for="(item, index) in list">
								<view class='item flex-row row-center-wrapper ' :class='index == navActive?"on":""'
									:key="item.cid" @click='tap(index, item.cid)' :id='"sort"+index'><text
										class="item_text skeleton-rect">{{item.name}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class='conter'>
						<block v-for="(p, i) in list" :key="i">
							<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;"
								scroll-with-animation='true' :class="i === navActive?'on':''" v-if="i === navActive">
								<view class='listw'>
									<view class='list flex-row'>
										<block v-for="(item, index) in children" :key="item.cid">
											<navigator hover-class='none'
												:url="'/pages/merchants/brand/index?type=normal&cid='+item.cid + '&title=' + item.name"
												class='item flex-row row-column row-middle'>
												<view class='picture skeleton-rect'>
													<image mode="widthFix"
														:src="item.imgUrl || '../../static/images/default.png'"></image>
												</view>
												<view class='name line1'>{{item.name}}</view>
											</navigator>
										</block>
									</view>
								</view>
								<view :style='"height:"+(height-300)+"rpx;"'></view>
							</scroll-view>
						</block>
					</view>
				</view>
			</view>
	</view>
	</ls-skeleton>
</template>

<script>
	let plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();
	let isHeight = (uni.getSystemInfoSync().windowHeight - 100) / 4
	import {
		getCategoryList,
		getCityHasData
	} from "@/api/cus";
	import {
		toLogin,
	} from "@/libs/login.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				index: 1,
				height: 0,
				hightArr: [],
				toView: "",
				navActive: 0,
				winHeight: 0,
				children: [],
				list: [],
				cityData: [],
				area: {},
				keyword: '',
				loading: true,
				isHeight: isHeight,
				scrollTop: 0
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin'
			})
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						this.getCategoryParent(0);
						this.getCityHasData();
						this.initRecord();
					}
				},
				deep: true,
			},
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, 'res')
					that.winHeight = res.windowHeight
				},
			});
			if (that.isLogin == false) {
				toLogin();
			}
			that.getCategoryParent(0);
			that.getCityHasData();
			that.initRecord();
		},

		onShow() {

		},

		methods: {

			bindPickerChange: function(e) {
				let that = this;
				console.log('picker发送选择改变，携带值为', e.detail.value)
				that.index = e.detail.value;
				that.area = that.cityData[e.detail.value];
				uni.setNavigationBarTitle({
					title: that.area
				})
			},

			tap: function(index, id) {
				// console.log(index, id);
				// this.toView = '' + id + 0;
				this.navActive = index;
				if (this.list.length > 2) {
					this.scrollTop = (index - 10) * this.isHeight;
				}
				console.log(this.scrollTop)
				this.getCategoryChilder(id);
			},

			/**
			 * @param {int} pid 0
			 * 获取父分类
			 */
			getCategoryParent() {
				let that = this;
				getCategoryList({
					pid: 0
				}).then(res => {
					that.list = res.value.list;
					that.getCategoryChilder(res.value.list[0].cid);
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 获取子分类
			 * @param {int} cid
			 */
			getCategoryChilder(cid) {
				let that = this;
				getCategoryList({
					pid: cid
				}).then(res => {
					that.children = res.value.list;
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 获取城市数据
			 */
			getCityHasData() {
				let that = this;
				getCityHasData().then(res => {
					that.cityData = res.value
					uni.setNavigationBarTitle({
						title: that.cityData[that.index].cityName
					})
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			getSerachList() {
				that.$util.Tips('/pages/merchants/goods?cityCode=' + that.cityData[that.index].cityCode + '&keyword=' +
					that.searchVal)
			},

			/**
			 * 语音插件
			 */
			streamRecord() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.record')) {
							if (res.authSetting['scope.record']) {
								manager.start({
									lang: 'zh_CN',
								});
							} else {
								uni.showModal({
									content: '检测到您还没打开麦克风，是否去设置打开？',
									confirmText: "确认",
									cancelText: "取消",
									success: function(res) {
										if (res.confirm) {
											uni.openSetting({
												success(res) {
													console.log(res);
													manager.start({
														lang: 'zh_CN',
													})
												}
											});
										}
									}
								})

							}
						} else {
							manager.start({
								lang: 'zh_CN',
							})
						}
					}
				});

			},

			endStreamRecord() {
				console.log('=======结束====')
				manager.stop()
			},
			/**
			 * 
			 */
			initRecord() {
				//有新的识别内容返回，则会调用此事件
				manager.onRecognize = (res) => {
					console.log(res);
					let text = res.result;
					this.keyword = text.replace("。", "");
				}
				// 识别结束事件
				manager.onStop = (res) => {
					console.log(res);
					let text = res.result;
					if (text == '') {
						console.log('没有说话');
						return;
					}
					this.keyword = text.replace("。", "");
				}
			},

			getSearch(e) {
				console.log(1);
				let that = this;
				if (!that.keyword) {
					return that.$util.Tips({
						title: '请输入关键词'
					})
				}
				that.$util.Tips('/pages/merchants/brand/index?type=search&cityCode=' + that.cityData[that.index].cityCode +
					'&keyword=' + that.keyword)
			}
		}

	}
</script>

<style>
	.container {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #f1f1f1;
	}

	.container .a {
		padding: 30rpx;
		position: relative;
		z-index: 9;
		/* background-color: #f1f1f1; */
	}

	.container .a picker {
		width: 180rpx;
		text-align: center;
	}

	.container .a picker text {
		font-weight: 600;
	}

	.container .a text {
		/* margin: 0 20rpx 0 0; */
		/* color: #fff; */
	}

	.container .a picker text::after {
		content: '';
		width: 0;
		display: inline-block;
		margin-left: 10rpx;
		vertical-align: middle;
		height: 0;
		border-right: 8rpx solid transparent;
		border-left: 8rpx solid transparent;
		/* border-top: 5px solid #fff; */
		border-top: 8rpx solid;
	}

	.container .a .searchBtn {
		width: 120rpx;
	}

	.container .a .uni-inline-item {
		position: relative;
		z-index: 9;
	}

	.container .a .search {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		/* background-color: #f6f7f9; */
		background-color: #fff;
		border-radius: 60rpx;
	}

	.container .a .search input {
		background: none;
	}

	.aside {
		/* background-color: #f1f1f1; */
		overflow-y: auto;
		overflow-x: hidden;
		width: 200rpx;
		height: 100%;
		overflow: hidden;
	}

	.aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.aside .item_text .text {}

	.aside .item.on {
		/* background-color: #f7f7f7;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold; */

		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
	}

	.con-box {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		border-radius: 50rpx;
		/* background-color: #f7f7f7; */
	}

	.conter .listw {
		/* padding-top: 20rpx; */
	}

	.conter .listw .title {
		height: 100rpx;
		align-items: center;
	}

	.conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.conter .listw .title .list_title,
	.conter .listw .title uni-image,
	.conter .listw .title image {
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}

	.conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}

	.conter .list .item {
		/* width: 174rpx; */
		width: 172rpx;
		margin-top: 26rpx;
	}

	.conter .list .item .picture,
	.conter uni-image,
	.conter .list .item image,
	/deep/.easy-loadimage {
		/* width: 110rpx;
		height: 110rpx; */
		width: 140rpx;
		height: 140rpx;
		/* border-radius: 50%; */
	}


	.conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>